<template>
  <div>
    <transition name="alpha">
      <div
        style="width: 100%;height: 100vh; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:10; background-color:#000000;position: fixed;bottom: 0;"
        v-if="visible"></div>
    </transition>
    <transition name="pop">
      <div class="container" v-if="visible">
        <div class="title">
          <div style="display: flex;flex-direction: row;background: white;z-index: 102">
            <img :src="IconClose" style="width: 18px;height:18px;padding: 15px;"
                 v-on:click="onCloseClick"/>
            <span
              style="flex: 1;text-align: center;margin: auto;display: inline-block;position: relative;left: -22px;color: #42578E;font-size: 18px;top: .5px">选择存期</span>
          </div>
        </div>
        <!--<div style="overflow: scroll;display: flex;flex-direction: column;">-->
        <!--<div style="margin-top: 45px;z-index: 10">-->
        <!--<div v-for="plan,index in planList" v-bind:key="index" class="plan" v-on:click="onPlanSelected(plan)">-->
        <!--<span style="color: #42578E;font-size: 18px;">{{plan.name}}</span>-->
        <!--<span style="color: #97989C;font-size: 13px;">{{plan.description}}</span>-->
        <!--<span style="color: #97989C;font-size: 13px;" v-if="plan.prompt !== undefined">{{plan.prompt}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">-->
        <div style="overflow: hidden;display: flex;flex-direction: column;margin-top: 55px" id="wheel">
          <div v-bind:id="'term'+term.id" v-bind:key="index"
               v-for="(term,index) in termList" style="text-align: center">
            <div v-bind:id="'term'+term.id+'1'" style="text-align: center;font-size: 20px;color: #42578e;">
              {{term.name + ' ' + term.description}}
            </div>
          </div>
        </div>
        <!--</v-touch>-->
      </div>
    </transition>
  </div><!---->
</template>

<script>
  import IconClose from '@/assets/icon/icon_close.png'

  export default {
    name: 'HelloWorld',
    props: ['selectedTerm', 'visible'],
    data () {
      return {
        IconClose: IconClose,
        termList: [
          {name: '定期3个月', description: '存款利率1.32%', id: 1},
          {name: '定期6个月', description: '存款利率1.56%', id: 2},
          {name: '定期1年', description: '存款利率1.80%', id: 3},
          {name: '定期2年', description: '存款利率3.12%', id: 4},
          {name: '定期3年', description: '存款利率4.10%', id: 5},
          {name: '定期3年', description: '存款利率4.875%', id: 6}
        ],
        startX: 0,
        startY: 0,
        position: {},
        currentItem: 1
      }
    },
    created () {
      this.isTouchDevice()
    },
    mounted () {
      this.position = this.getXYPositionById('wheel')
      this.rotateAndPerspective(1, 0.5)
      this.rotateAndPerspective(2, 0.4)
      this.rotateAndPerspective(3, 0.0)
    },
    methods: {
      onCloseClick: function () {
        this.onTermSelected(this.selectedTerm)
      },
      onTermSelected: function (term) {
        console.log('test')
        this.$emit('onTermSelected', term)
      },
      swiperleft: function () {
        // this.$router.push({'path': '/queuehistory'})
        console.log('swipeLeft')
      },
      swiperright: function (e) {
        // this.$router.push({'path': '/home'})
        //        console.log('swipeRight')
        //        console.log(e)
      },
      touchStartFunc: function (evt) {
        try {
          // evt.preventDefault()
          // 阻止触摸时浏览器的缩放、滚动条滚动等
          var touch = evt.touches[0] // 获取第一个触点
          var x = Number(touch.pageX) // 页面触点X坐标
          var y = Number(touch.pageY) // 页面触点Y坐标
          // 记录触点初始位置
          this.startX = x
          this.startY = y
        } catch (e) {
          alert('touchSatrtFunc：' + e.message)
        }
      },
      // touchmove事件，这个事件无法获取坐标
      touchMoveFunc: function (evt) {
        try {
          // evt.preventDefault() //阻止触摸时浏览器的缩放、滚动条滚动等
          var touch = evt.touches[0] // 获取第一个触点
          var x = Number(touch.pageX) // 页面触点X坐标
          var y = Number(touch.pageY) // 页面触点Y坐标
          console.log(x, y)
          // document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y
          // 判断滑动方向 上下

          if (y - this.startY > 100) {
            //            swipeDown()// 你自己的方法 我是用来翻页的一样的
          } else if (y - this.startY < -100) {
            //            swipeUp()// 你自己的方法
          }
        } catch (e) {
          alert('touchMoveFunc：' + e.message)
        }
      },
      // touchend事件
      touchEndFunc: function (evt) {
        try {
          // evt.preventDefault() //阻止触摸时浏览器的缩放、滚动条滚动等
        } catch (e) {
          alert('touchEndFunc：' + e.message)
        }
      },
      // 绑定事件
      bindEvent: function () {
        document.addEventListener('touchstart', this.touchStartFunc, false)
        document.addEventListener('touchmove', this.touchMoveFunc, false)
        document.addEventListener('touchend', this.touchEndFunc, false)
      },
      // 判断是否支持触摸事件
      isTouchDevice: function () {
        // document.getElementById("version").innerHTML = navigator.appVersion
        try {
          document.createEvent('TouchEvent')
          this.bindEvent() // 绑定事件
        } catch (e) {
          alert('不支持TouchEvent事件！' + e.message)
        }
      },
      /**
       * 得到对象的相对浏览器的坐标
       */
      getXYPositionById: function (id) {
        var odiv = document.getElementById(id)
        return {
          x: odiv.getBoundingClientRect().left,
          y: odiv.getBoundingClientRect().top
        }
      },
      setWheelItemPosition: function (index, percent) {
        //        var item = document.getElementById('term' + index)
        //        item.style.transform()
        if (index <= this.currentItem) {
          // 说明item当前相对平衡位置偏上,则变小
        } else {
          // 说明item相对平衡位置偏下，则变大
        }
      },
      rotateAndPerspective: function (index, percent) {
        let term = document.getElementById('term' + index)
//        let termChild = document.getElementById('term' + index + '1')
        this.perspective(term, (600 - 50) * percent + 50)
        console.log(index, (500 - 100) * percent + 100 + index)
//        this.transform(termChild, percent * (80 - 50) + 50)
      },
      transform: function (obj, deg) {
        obj.style.transform = 'rotateX(' + deg + 'deg)'
        obj.style.webkitTransform = 'rotateX(' + deg + 'deg)'
      },
      perspective: function (obj, fraction) {
        obj.style.perspective = fraction + 'px'
        obj.style.webkitPerspective = fraction + 'px'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 11;
  }

  .title::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #f8f8f8;
    /*background: red;*/
    position: relative;
    left: 0px;
  }

  .plan {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    text-align: center;
  }

  .plan::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #f8f8f8;
    /*background: red;*/
    position: relative;
    left: 0px;
    top: 5px;
  }

  .container {
    z-index: 100;
    width: 100%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0vh;
    background: white;
    filter: alpha(Opacity=100);
    -moz-opacity: 1;
    opacity: 1;
  }

  .item {

  }

  .pop-enter {
    bottom: -70vh;
  }

  .pop-enter-to {
    bottom: 0;
  }

  .pop-enter-active,
  .pop-leave-active {
    transition: bottom 0.4s;
    transition-timing-function: ease;
  }

  .pop-leave {
    bottom: 0vh;
  }

  .pop-leave-to {
    bottom: -70vh;
  }

  .alpha-enter {
    opacity: 0.1;
  }

  .alpha-enter-to {
    opacity: 1;
  }

  .alpha-enter-active {
    transition: opacity 0.9s;
    transition-timing-function: ease;
  }
</style>
